<template>
  <div>
      <h3>基础用法</h3>
      <p>基础的导航Tabs用法</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-tabs :selected-nav.sync="navName">
            <g-nav>
                <g-item name="sports">
                     <g-icon icon="thumbsup"></g-icon>
                    体育
                </g-item>
                <g-item name="hot" disable>热点</g-item>
                <g-item name="cba">CBA</g-item>
            </g-nav>
            <g-content>
                <g-pane name="sports"> 体育相关的资讯</g-pane>
                <g-pane name="hot"> 社会热点相关的资讯</g-pane>
                <g-pane name="cba"> cba相关的资讯</g-pane>
            </g-content>
        </g-tabs>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(0)" ref="one">
          <g-icon class="icon-down" :icon="isShow[0] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>attributes</h3>
      <p>组件参数说明</p>
    </div>
  </div>
</template>
 
<script lang="ts">
import Vue from "vue";
import gIcon from "../../../src/Icon.vue";
import gTabsContent from "../../../src/Tabs-content.vue";
import gTabsItem from "../../../src/Tabs-item.vue";
import gTabsNav from "../../../src/Tabs-nav.vue";
import gTabsPane from "../../../src/Tabs-pane.vue";
import gTabs from "../../../src/Tabs.vue";
import mixin from "../mixin";

export default {
  name: "gButton",
  mixins: [mixin],
  data() {
    return {
      navName:'cba',
      codeStr: `<g-tabs :selected-nav.sync="navName">
            <g-nav>
                <g-item name="sports">
                     <g-icon icon="settings"></g-icon>
                    体育
                </g-item>
                <g-item name="hot" disable>热点</g-item>
                <g-item name="cba">CBA</g-item>
                <template slot="actions">
                    <g-button>设置</g-button>
                </template>
            </g-nav>
            <g-content>
                <g-pane name="sports"> 体育相关的资讯</g-pane>
                <g-pane name="hot"> 社会热点相关的资讯</g-pane>
                <g-pane name="cba"> cba相关的资讯</g-pane>
            </g-content>
        </g-tabs>`.replace(/^\s*/gm, "")
        .trim(),
    };
  },
  components: {
    "g-icon": gIcon,
    "g-content":gTabsContent,
    "g-item":gTabsItem,
    "g-pane":gTabsPane,
    "g-nav":gTabsNav,
    "g-tabs":gTabs,
  },
};
</script>
<style scoped>

</style>
